<template>
    <div>
        <!-- 其他代码 -->
        <div ref="chart" style="width: 600px;height:400px;"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import request from '@/utils/request';

const chart = ref(null);

const fetchDataAndRenderChart = async () => {
    const response = await request.get('/data/deptEmployeeCount');
    const depts = response.data.depts;

    const names = depts.map(dept => dept.name);
    const counts = depts.map(dept => dept.employeeCount);

    const chartInstance = echarts.init(chart.value);
    const option = {
        title: {
            text: '部门用工数量统计'
        },
        tooltip: {},
        xAxis: {
            data: names
        },
        yAxis: {},
        series: [{
            name: '员工数量',
            type: 'bar',
            data: counts
        }]
    };
    chartInstance.setOption(option);
};

onMounted(() => {
    fetchDataAndRenderChart();
});
</script>